<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <script>
    (function (win) {
        var watch;
        function refreshRem() {
            let designSize = 1920; // 窗口的设计尺寸
            let html = document.documentElement; // 当前窗口对象
            let wW = html.clientWidth; // 当前窗口宽度
            let rem = wW * 1 / designSize; // 计算比例
            document.documentElement.style.fontSize = rem + 'px'; // 设置根节点的字体大小
        }
        // 监听窗口变化
        win.addEventListener('resize', function () {
            // 先清除原先未执行的设置，因为设置设置了300ms的延时
            clearTimeout(watch);
            // 重新设定新的设置，300ms后执行，延时是防止获取窗口变化时获取的窗口宽度出错
            watch = setTimeout(refreshRem, 300);
        }, false);
        // 监听页面显示或者切换
        win.addEventListener('pageshow', function (e) {
            // 在页面显示的情况下
            if (e.persisted) {
                clearTimeout(watch);
                watch = setTimeout(refreshRem, 300);
            }
        }, false);
        refreshRem();
    })(window)
  </script>
</html>
